import React, { useEffect, useState } from 'react';
import { Modal, Divider } from 'antd';
import { handleFileUrl } from '@/utils/utils';
import { FilePdfOutlined } from '@ant-design/icons';
import FileOpen from '../FileIframOpen';


interface BoardDetailProps {
  visible: boolean;
  info: any;
  onCancel: () => void;
}

const BoardDetail: React.FC<BoardDetailProps> = ({ visible, info, onCancel }) => {
  const [fileHtml, setFileHtml] = useState<any>('');
  const [fileList, setFileList] = useState<any[]>([]);
  const [fileUrl, setFileUrl] = useState<string>('');
  const [showFile, setShowFile] = useState<boolean>(false);

  useEffect(() => {
    if (info && info.content) {
      // const data = info.content.replace('<head>', '<head><meta charset="UTF-8" />');
      // const url = URL.createObjectURL(new Blob([data], { type: 'text/html' }));
      setFileHtml(info.content);
    }
    if (info && info.attachmentUrl && info.attachment) {
      const imgs = handleFileUrl(info.attachment, info.attachmentUrl);
      setFileList(imgs)
    }
  }, [info])

  return (
    <Modal onCancel={onCancel} visible={visible} width={1000} footer={null} style={{ top: '10px' }}>
      <div style={{ paddingTop: '20px' }}>
        <h2 style={{ textAlign: 'center' }}>{info.title || ''}</h2>
        {/* <iframe
          src={fileHtml}
          style={{ width: '100%', height: '65vh', display: 'block', margin: '0 auto' }}
        /> */}
        <p dangerouslySetInnerHTML={{ __html: fileHtml }} />
        {fileList.length > 0 && (
          <div style={{ marginTop: '10px' }}>
            <Divider orientation="left">附件</Divider>
            {fileList.map((file) => {
              return (
                <div
                  style={{
                    padding: '10px 5px',
                    border: '1px solid #f4f4f4',
                    marginTop: '5px',
                    cursor: 'pointer',
                  }}
                  onClick={() => {
                    setFileUrl(file.url);
                    setShowFile(true);
                  }}
                >
                  <FilePdfOutlined />
                  <span style={{ marginLeft: '10px' }}>{file.name}</span>
                </div>
              );
            })}
          </div>
        )}
      </div>
      {showFile && (
        <FileOpen
          fielUrl={fileUrl}
          modalVisible={showFile}
          onCancel={() => {
            setShowFile(false);
            setFileUrl('');
          }}
        />
      )}
    </Modal>
  );
};

export default BoardDetail
